<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
		<title>京东移动端首页</title>
		<!-- <link rel="shortcut icon" href="../assets/img/logo.png" type="image/x-icon" /> -->
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/jd.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
		<script src="../js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jd.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 1、banner -->
			<div class="banner">
				<div class="banner-form">
					<div class="form-left">
						<img src="../img/classify.png">
					</div>
					<div class="form-center">
						<i class="jd"><img src="../img/logo.png"></i>
						<i class="fdj"><img src="../img/big.png"></i>
						<input type="text" placeholder="钢琴">
					</div>
					<div class="form-right">
						<span>登录</span>
					</div>
				</div>
				<!-- 1-2轮播图 -->
				<div class="swiper-container">
					<!-- 1-2、轮播的图片 -->
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="../img/banner1.png">
						</div>
						<div class="swiper-slide">
							<img src="../img/banner2.png">
						</div>
						<div class="swiper-slide">
							<img src="../img/banner3.jpg">
						</div>
						<div class="swiper-slide">
							<img src="../img/banner4.png">
						</div>
						<div class="swiper-slide">
							<img src="../img/banner5.png">
						</div>
					</div>
					<!--1-3、轮播分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<!-- 2.banner-b -->
			<div class="banner-b">
				<img src="../img/01.jpg">
			</div>
			<!-- 3.banner-list -->
			<div class="banner-list">
				<ul>
					<li><a href="#"><img src="../img/list1.png" alt=""><span>京东超市</span></a></li>
					<li><a href="#"><img src="../img/list2.png" alt=""><span>数码电器</span></a></li>
					<li><a href="#"><img src="../img/list3.png" alt=""><span>京东服饰</span></a></li>
					<li><a href="#"><img src="../img/list4.png" alt=""><span>京东生鲜</span></a></li>
					<li><a href="#"><img src="../img/list5.png" alt=""><span>京东到家</span></a></li>
					<li><a href="#"><img src="../img/list6.png" alt=""><span>充值缴费</span></a></li>
					<li><a href="#"><img src="../img/list7.png" alt=""><span>9.9元拼</span></a></li>
					<li><a href="#"><img src="../img/list8.png" alt=""><span>领券</span></a></li>
					<li><a href="#"><img src="../img/list9.png" alt=""><span>赚钱</span></a></li>
					<li><a href="#"><img src="../img/list10.png" alt=""><span>PLUS会员</span></a></li>
					<div class="fangdian"></div>
					<div class="yuandian"></div>
				</ul>
			</div>
			<!-- 京东秒杀jdms -->
			<div class="jdms">
				<div class="jdms-top">
					<div class="jdms-top-a">
						京东秒杀
					</div>
					<div class="jdms-top-b">
						<p><span>18点到场</span>
							<b>00:00:00</b>
						</p>
					</div>
					<div class="jdms-top-c">
						更多秒杀<c class="bj">></c>
					</div>
				</div>
				<div class="jdms-bootom">
					<div class="jdms-bootom-yi"><a href=""><img src="../img/miaosha2.jpg"><span><b>￥1699</b></span><br><del>￥2699</del></a></div>
					<div class="jdms-bootom-er"><a href=""><img src="../img/miaosha3.jpg"><span><b>￥1450</b></span><br><del>￥2999</del></a></div>
					<div class="jdms-bootom-san"><a href=""><img src="../img/miaosha3.jpg"><span><b>￥599</b></span><br><del>￥699</del></a></div>
					<div class="jdms-bootom-si"><a href=""><img src="../img/miaosha4.jpg"><span><b>￥199</b></span><br><del>￥399</del></a></div>
					<div class="jdms-bootom-wu"><a href=""><img src="../img/miaosha5.jpg"><span><b>￥699</b></span><br><del>￥799</del></a></div>
				</div>
			</div>
			<!-- xinren -->
			<div class="xinren">
				<div class="xinren-left">
					<img src="../img/x1.png">
				</div>
				<div class="xinren-right">
					<img src="../img/x2.png">
				</div>
			</div>
			<!-- center -->
			<div class="center">
				<div class="center-a">
					<img src="../img/c1.png">
				</div>
				<div class="center-b">
					<img src="../img/c2.png" class="act">
				</div>
				<div class="center-c">
					<img src="../img/c3.png">
				</div>
			</div>
			<!-- zouxin-z -->
			<div class="zouxin-z">

				<p>走心推荐</p>
				<div class="zouxin">
					<div class="zouxin-a ccc">
						<img src="../img/zx1.png">
						<div class="dw">
							<img src="../img/miaosha5.jpg">
						</div>
						<div class="dw-z-a">
							<span class="aaa">精品手机榜</span>
							<br>
							<span class="bbb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热销爆款</span>
						</div>
					</div>
					<div class="zouxin-b ccc">
						<img src="../img/zx2.png">
						<div class="dw-a">
							<img src="../img/miaosha5.jpg">
						</div>
						<div class="dw-z-b">
							<span class="aaa">精品手机榜</span>
							<br>
							<span class="bbb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热销爆款</span>
						</div>
					</div>
					<div class="zouxin-c ccc">
						<img src="../img/zx3.png">
						<div class="dw-c">
							<img src="../img/miaosha5.jpg">
						</div>
						<div class="dw-z-c">
							<span class="aaa">精品手机榜</span>
							<br>
							<span class="bbb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热销爆款</span>
						</div>
					</div>
					<div class="zouxin-d ccc">
						<img src="../img/zx4.png">
						<div class="dw-d">
							<img src="../img/miaosha5.jpg">
						</div>
						<div class="dw-z-d">
							<span class="aaa">精品手机榜</span>
							<br>
							<span class="bbb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热销爆款</span>
						</div>
					</div>
				</div>
			</div>
			<!-- jxhs -->
			<div class="jxhs">
				<p>精选会场</p>
				<div class="jxhs-top">
					<div class="jxhs-top-a">
						<img src="../img/jx1.png">
					</div>
					<div class="jxhs-top-b">
						<img src="../img/jx2.png">
					</div>
					<div class="jxhs-top-b">
						<img src="../img/jx3.png">
					</div>
					<div class="jxhs-top-b">
						<img src="../img/jx4.png">
					</div>
				</div>
			</div>
			<!-- djxy -->
			<div class="djxy">
				<p class="zj">东家小院</p>
				<div class="djxy-top">
					<div class="djxy-top-left">
						<h2>下厨做饭</h2>
						<p>尽享鲜香</p>
						<img src="../img/jd1.jpg">
						<img src="../img/jd2.jpg">
					</div>
					<div class="djxy-top-right">
						<h2>下厨做饭</h2>
						<p>尽享鲜香</p>
						<img src="../img/jd1.jpg">
						<img src="../img/jd2.jpg">
					</div>
				</div>
				<div class="djxy-bottom">
					<div class="djxy-bottom-a">
						<h2>水果汇聚</h2>
						<p>营养美味</p>
						<img src="../img/shuig2%20(2).jpg">
					</div>
					<div class="djxy-bottom-b">
						<h2>家居收纳</h2>
						<p>小确幸</p>
						<img src="../img/shuig2%20(1).jpg">
					</div>
					<div class="djxy-bottom-c">
						<h2>科普好书</h2>
						<p>探索真相</p>
						<img src="../img/shuig3.jpg">
					</div>
					<div class="djxy-bottom-d">
						<h2>租房贵族</h2>
						<p>拎包即住</p>
						<img src="../img/shuig4.jpg">
					</div>
				</div>
			</div>
			<!-- wntj每日逛 -->
			<div class="mrg">
				<p class="ppp">每日逛</p>
				<div class="wntj-top">
					<div class="wntj-top-a">
						<h2>水果汇聚</h2>
						<p>营养美味</p>
						<img src="../img/shuig2%20(2).jpg">
					</div>
					<div class="wntj-top-b">
						<h2>家居收纳</h2>
						<p>小确幸</p>
						<img src="../img/shuig2%20(1).jpg">
					</div>
					<div class="wntj-top-c">
						<h2>科普好书</h2>
						<p>探索真相</p>
						<img src="../img/shuig3.jpg">
					</div>
					<div class="wntj-top-d">
						<h2>租房贵族</h2>
						<p>拎包即住</p>
						<img src="../img/shuig4.jpg">
					</div>
				</div>
				<div class="wntj-bottom">
					<div class="wntj-bottom-a">
						<h2>水果汇聚</h2>
						<p>营养美味</p>
						<img src="../img/shuig2%20(2).jpg">
					</div>
					<div class="wntj-bottom-b">
						<h2>家居收纳</h2>
						<p>小确幸</p>
						<img src="../img/shuig2%20(1).jpg">
					</div>
					<div class="wntj-bottom-c">
						<h2>科普好书</h2>
						<p>探索真相</p>
						<img src="../img/shuig3.jpg">
					</div>
					<div class="wntj-bottom-d">
						<h2>租房贵族</h2>
						<p>拎包即住</p>
						<img src="../img/shuig4.jpg">
					</div>
				</div>
			</div>
			<!-- tuijian推荐 -->
			<div class="tuijian-a">
				<p class="tou">为你推荐</p>
				<div class="tuijian">
					<div class="tuijian-left">
						<img src="../img/5bf2ca9cN267578f0.jpg!q70.dpg.webp">
						<p>法国SE无痕内衣女聚拢上托调整型无钢圈文胸蕾丝亲肤透气胸罩防下垂侧收副乳 香芋色 34/75</p>
						<span>￥48.8</span>
						<button type="button">看相似</button>
					</div>
					<div class="tuijian-right">
						<img src="../img/5bf2ca9cN267578f0.jpg!q70.dpg.webp">
						<p>法国SE无痕内衣女聚拢上托调整型无钢圈文胸蕾丝亲肤透气胸罩防下垂侧收副乳 香芋色 34/75</p>
						<span>￥48.8 <a href="">满减</a></span>
						<button type="button">看相似</button>
					</div>
				</div>
				<div class="tuijian">
					<div class="tuijian-left">
						<img src="../img/5bf2ca9cN267578f0.jpg!q70.dpg.webp">
						<p>法国SE无痕内衣女聚拢上托调整型无钢圈文胸蕾丝亲肤透气胸罩防下垂侧收副乳 香芋色 34/75</p>
						<span>￥48.8</span>
						<button type="button">看相似</button>
					</div>
					<div class="tuijian-right">
						<img src="../img/5bf2ca9cN267578f0.jpg!q70.dpg.webp">
						<p>法国SE无痕内衣女聚拢上托调整型无钢圈文胸蕾丝亲肤透气胸罩防下垂侧收副乳 香芋色 34/75</p>
						<span>￥48.8 <a href="">满减</a></span>
						<button type="button">看相似</button>
					</div>
				</div>
				<div class="tuijian">
					<div class="tuijian-left">
						<img src="../img/5bf2ca9cN267578f0.jpg!q70.dpg.webp">
						<p>法国SE无痕内衣女聚拢上托调整型无钢圈文胸蕾丝亲肤透气胸罩防下垂侧收副乳 香芋色 34/75</p>
						<span>￥48.8</span>
						<button type="button">看相似</button>
					</div>
					<div class="tuijian-right">
						<img src="../img/5bf2ca9cN267578f0.jpg!q70.dpg.webp">
						<p>法国SE无痕内衣女聚拢上托调整型无钢圈文胸蕾丝亲肤透气胸罩防下垂侧收副乳 香芋色 34/75</p>
						<span>￥48.8 <a href="">满减</a></span>
						<button type="button">看相似</button>
					</div>
				</div>
			</div>
			<!-- dibu底部 -->
			<div class="dibu">
				<div class="dibu-a">
					<img src="../img/db1.png">
				</div>
				<div class="dibu-b">
					<img src="../img/db2.png">
				</div>
				<div class="dibu-c">
					<img src="../img/db3.png">
				</div>
				<div class="dibu-d">
					<img src="../img/db4.png">
				</div>
				<div class="dibu-e">
					<img src="../img/db5.png">
				</div>
			</div>
			<!-- 回到顶部 -->
			<div class="fix">
			        <div class="hddb">
			            <span><img src="../img/dingbu.jpg" alt=""></span>
			        </div>
			    </div>
		</div>
		<script>
		    $(function(){
		        $('.fix').hide();
		        $(function(){
		            $(window).scroll(function(){
		                if($(window).scrollTop()>200){
		                    $('.fix').fadeIn(200);
		                }
		                else{$('.fix').fadeOut(100);}
		            });
		            $('.fix').click(function(){
		                $('body,html').animate({scrollTop:0},200);
		                return false;
		            });
		        });
		    });
		</script>
	</body>
</html>
